<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>系统信息监控</title>
    <style>
        .main{
            width:1000px;
            height:400px;
        }
        .main-bottom{
            width:100px;
            height:20px;
            margin:0px auto;
        }
    </style>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" class="main">
    </div>
    <div class="main-bottom">系统信息监控</div>
    <!-- ECharts单文件引入 -->
    <script src="http://vm.zhtxw.cn/local/js/echarts.min.js"></script>
    <script src="http://csstatic.zhtxw.cn/dxh2/js/common/libs/jquery/jquery-1.8.3.min.js"></script>
    <!--<script src="../static/js/echarts-all.js"></script>-->
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        getOpt();
        function getOpt(){
            var option = {
        	    tooltip : {
        	        trigger: 'axis'
        	    },
        	    legend: {
        	        data:[]
        	    },
                /*
        	    toolbox: {
        	        show : true,
        	        feature : {
        	            mark : {show: true},
        	            dataView : {show: true, readOnly: false},
        	            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
        	            restore : {show: true},
        	            saveAsImage : {show: true}
        	        }
        	    },*/
        	    calculable : true,
        	    xAxis : [
        	        {
        	            type : 'category',
        	            boundaryGap : false,
        	            data : ['11:10','11:20','11:30','11:40','11:50','12:00','12:10']
        	        }
        	    ],
        	    yAxis : [
        	        {
        	            type : 'value'
        	        }
        	    ],
        	    series : [
        	        {
        	            name:'',
        	            type:'line',
        	            stack: '总量',
        	            data:[]
        	        },
        	        {
        	            name:'',
        	            type:'line',
        	            stack: '总量',
        	            data:[]
        	        },
        	        {
        	            name:'',
        	            type:'line',
        	            stack: '总量',
        	            data:[]
        	        }
        	    ]
        	};
            $.ajax({
                 type: "GET",
                 url: "/moninfo",
                 data: {username:$("#username").val(), content:$("#content").val()},
                 dataType: "json",
                 success: function(obj) {
                     option.legend.data  = obj.list;

                     option.series[0].data = obj.cpu_info.cpu_info_list;
                     option.series[0].name = obj.cpu_info.name;

                     option.series[1].data = obj.me_info.me_info_list;
                     option.series[1].name = obj.me_info.name;

                     option.series[2].data = obj.disk_info.disk_info_list;
                     option.series[2].name = obj.disk_info.name;

                     option.xAxis.data = obj.xList;
                     myChart.setOption(option);
                 }
             });
        	return option;
        }

    </script>
</body>